<template>
	<div class="perfChart">
		<group class="perfChartGroup">
			<div style="margin-top: 10px">
				<span class="blockTitle">{{chartTitle}}</span>
				<div class="subTitle">
					<span>月份：</span><span style="color: darkred">{{curYYMM}}</span>
					<span style="padding-left: 15px;">销售额：</span><span style="color: darkred">{{totalAmount}}元</span>
				</div>
			</div>

			<v-chart v-if="showTag" :data="data">
				<v-scale x :tick-count="0" :max="31"/>
				<v-scale y :tick-count="0"/>
				<v-line shape="smooth" :colors="gradient"/>
				<v-area shape="smooth" :colors="gradient"/>
				<v-guide type="tag" :options="tag" />
			</v-chart>
		</group>
	</div>
</template>

<script>
	import { Group, VChart, VGuide, VLine, VArea, VScale } from 'vux'
	import NetWorking from '../../../../utils/networking'
	import dateutils from '@/utils/date'

	export default {
		name: "perf-chart",
		components: {
			Group,
			VChart,
			VLine,
			VArea,
			VGuide,
			VScale
		},
		data () {
			return {
				showTag: false,
				gradient: [
					[0, '#F2C587'],
					[0.5, '#ED7973'],
					[1, '#8659AF']
				],
				tag: {},
				curYYMM: '',
				itemList: [],
				chartTitle: '月销售额',
				date: '',
				totalAmount: 0,
				rank: '',
				data: [
					{ date: 0, amount: 0 }
				]
			}
		},
		created: function () {
			let _this = this
			this.date = new Date()
			this.curYYMM = dateutils.getYYMM(this.date)
			let user = this.$store.state.user.userModel.sysUser

			NetWorking.doGet(
				'ai/sales/getSalesPerfByDayWithName',
				null,
				{
					params: {
						date: dateutils.getDate(new Date()),
						username: user.username
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.data = []
						let days = dateutils.mGetDate(_this.date.getFullYear(), _this.date.getMonth() + 1)

						if(rs.salesRankByDay.length == 0){
							let dd = new Date().getDate()
							for(let i=1; i<=dd; i++){
								_this.data.push({
									date: i,
									amount: 0
								})
							}
							_this.tag = {
								position: [ dd, 0 ],
								content: '0',
								direct: 'tl',
								offsetY: -5,
								background: {
									fill: '#8659AF'
								},
								pointStyle: {
									fill: '#8659AF'
								}
							}

							_this.totalAmount = 0
							_this.showTag = true

							return
						}else{
							let hasItem = false
							let amount = 0
							for(let i=1; i<=days; i++){
								for(let j=0; j<rs.salesRankByDay.length; j++){
									if(rs.salesRankByDay[j].value1 == i){
										_this.data.push({
											date: i,
											amount: rs.salesRankByDay[j].value2
										})
										hasItem = true
										amount = rs.salesRankByDay[j].value2
									}
								}

								if(i == rs.salesRankByDay[rs.salesRankByDay.length - 1].value1){
									_this.tag = {
										position: [ i, rs.salesRankByDay[rs.salesRankByDay.length - 1].value2 ],
										content: rs.salesRankByDay[rs.salesRankByDay.length - 1].value2 + '',
										direct: 'tl',
										offsetY: -5,
										background: {
											fill: '#8659AF'
										},
										pointStyle: {
											fill: '#8659AF'
										}
									}

									_this.totalAmount = rs.salesRankByDay[rs.salesRankByDay.length - 1].value2
									_this.showTag = true

									break
								}

								if(!hasItem){
									_this.data.push({
										date: i,
										amount: amount
									})
								}else{
									hasItem = false
								}
							}
						}
					}else{
						alert(rs.error_message)
					}
				}
			)
		}
	}
</script>

<style>
	.subTitle {
		padding-right: 5px;
		padding-top: 10px;
		font-size: 10px;
		text-align: right;
	}

	.perfChart {
		margin-bottom: 10px;
	}

	.perfChartGroup > .weui-cells {
		margin-top: 0em !important;
	}


</style>

